require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../lib/flexible')
require('../font/iconfont.css')
require('../css/courseDrill.less')
    //引入axios
const axios = require('axios')
    //weui-插件库
require('weui')
const weui = require('weui.js')

document.addEventListener('DOMContentLoaded', function() {
    /* 获取元素 */
    const mask = document.querySelector('.mask')
    const continuing = document.querySelector('.continuing')
    const finish = document.querySelector('.finish')
    const title = document.querySelectorAll('.title')
    const currentNum = document.querySelector('#currentNum')
    const totalNum = document.querySelector('#totalNum')
    const video = document.querySelector('video')
    const previous = document.querySelector('#previous')
    const pause = document.querySelector('#pause')
    const next = document.querySelector('#next')
    const plan = document.querySelector('#plan')
    const masLeft = document.querySelector('.mas-left')

    let fragments = JSON.parse(sessionStorage.fragments)
    console.log(fragments);

    //当前索引
    let index = 0
        //总节数
    let maxNum = fragments.length
    let tiem = 0 //训练的时间


    renderData()

    function renderData() {
        totalNum.textContent = maxNum
        currentNum.textContent = index + 1
            //渲染标题
        title[0].textContent = fragments[index].title
        title[1].textContent = fragments[index].title
            //渲染视频
        video.src = 'http://139.9.177.51:8099' + fragments[index].videoUrl
        video.poster = 'http://139.9.177.51:8099' + fragments[index].imgUrl
            //渲染蒙层背景图片
        masLeft.style.backgroundImage = `url(${'http://139.9.177.51:8099' + fragments[index].imgUrl})`
            // console.log(`url(${'http://139.9.177.51:8099' + fragments[index].imgUrl})`);

    }

    /*
    进度条
        总时间长(duration)/当前时长(currentTime)=总宽度(100)/当前宽度

        当前宽度=当前时长*总宽度/总时长
    */
    //timeupdate事件在音频/视频，的播放位置发生改变时触发
    video.addEventListener('timeupdate', function() {
            //获取视频播放总时长
            let totalTime = video.duration
                //获取视频当前时长
            let currentTime = video.currentTime
                // 可以用clientWidth获取进度条总宽度,这里简化用100
                //进度条当前宽度
            let currentWidth = 100 * currentTime / totalTime

            plan.style.width = currentWidth + '%'

        })
        //ended事件，在音频/视频，的播放结束时触发
    video.addEventListener('ended', function() {
        weui.toast('即将播放下一节课程')
        setTimeout(function() {
            next.click()
        }, 2000)
    })

    //记录时间
    function setTrainTime() {
        timeId = setInterval(function() {
            tiem++
            console.log(tiem);

        }, 1000)
    }

    setTrainTime()

    //上一个按钮
    previous.addEventListener('click', function() {
            index--
            if (index < 0) {
                index = maxNum - 1
            }
            renderData()
        })
        //暂停按钮
    pause.addEventListener('click', function() {
            mask.style.display = 'block'
            video.pause()
            clearInterval(timeId)
        })
        //下一个按钮
    next.addEventListener('click', function() {
            index++
            if (index > maxNum - 1) {
                index = 0
            }
            renderData()
        })
        //蒙层模态框的播放按钮
    continuing.addEventListener('click', function() {
        mask.style.display = 'none'
        video.play();
        setTrainTime()

    })


    finish.addEventListener('click', function() {
        let params = {
            id: sessionStorage.cid,
            userId: localStorage.userId,
            takeTime: tiem,
            calorie: tiem * 0.412
        }
        console.log(params);

        axios.post('http://139.9.177.51:8099/sports/saveTrain', params)
            .then(function(res) {
                if (res.data.status === 0) {
                    weui.toast(`您消耗了${params.calorie.toFixed(2)}卡路里`, {
                        callback: function() {
                            location.href = './course.html'
                        }
                    })
                } else {
                    weui.alert('继续加油')
                }
            })
    })
})